<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - LogicGates example</title>

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../../inputex/lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../assets/WireItEditor.css" />

<style>
div.WireIt-Container-closebutton { top: -16px; }
div.WireIt-ImageContainer div.body { width: 85px; }

div.WiringEditor-module-Lightbulb { height:100px; width:55px; }
div.WiringEditor-module-Lightbulb div.body {	height:70px; width:50px; }

div.WiringEditor-module-Clock { height:100px; width:80px; }
div.WiringEditor-module-Clock div.body { height:70px; width:50px; }

div.WiringEditor-module-Switch { height:60px; width:74px; }
div.WiringEditor-module-Switch div.body { height:45px; width:80px; }

.WiringEditor-module span { display: none; }
.WiringEditor-module { float: left; }
</style>



<!-- Libs -->
<script type="text/javascript" src="../../../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/tabview/tabview-min.js"></script>
<script src="../../lib/accordionview/accordionview-min.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../../../lib/excanvas.js"></script>


<!-- WireIt -->
<script type="text/javascript" src="../../../../build/wireit-inputex-editor-min.js"></script>
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="logicGates.js"></script>

</head>

<body class="yui-skin-sam">

	<div id="top">
		<div class="logo">WireIt WiringEditor - logic gates demo</a></div>
		<div id="toolbar"></div>
		<div class="topright">
			<span>Hello there !</span> | 
			<a href="../..">back to WireIt</a>
		</div>
	</div>

	<!-- Left panel-->
	<div id="left">
		
		<!-- Accordion for module categories-->
		 <ul id="modulesAccordionView">
			<li>
				<h2>Input Controls</h2>
				<div>
					<div id='module-category-input'></div>
				</div>
			</li>
			<li>
				<h2>Output Controls</h2>
				<div>
					<div id='module-category-output'></div>
				</div>
			</li>
			<li>
				<h2>Gates</h2>
				<div>
					<div id='module-category-gate'></div>
				</div>
			</li>			
		</ul>
		
	</div>	
	
	<div id="right">
		<ul id="accordionView">
			<li>
				<h2>Properties</h2>
				<div>
					<div id="propertiesForm"></div>
				</div>
			</li>
			<li>
				<h2>Minimap</h2>
				<div style='position: relative;'>
					<div id="layerMap"></div>
				</div>
			</li>
			<li>
				<h2>Infos</h2>
				<div>
				  <div style="padding: 10px;">
					<p>This example uses <i>ImageContainers</i> to represent logic gates.</p>
						<br />
						<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
						<br />
						<p><a href="logicGates.js" target="_new">Click here to view the language definition for this editor.</a></p>
				  </div>
				</div>
			</li>
	</div>
	
	<div id="center">
	</div>

	<div id="helpPanel">
	    <div class="hd">logicGates (WiringEditor example)</div>
	    <div class="bd" style="text-align: left;">
	        <p>This example uses <i>ImageContainers</i> to represent logic gates.</p>
			<br />
			<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
			<br />
			<p><a href="logicGates.js" target="_new">Click here to view the language definition for this editor.</a></p>
	    </div>
	</div>

</body>
</html>